<template>
  <div class="content">
    <div class="left">
      <el-tree
        :data="ruleTreelist"
        @node-click="handleNodeClick"
        :allow-drag="allowDrag"
      >
      </el-tree>
    </div>
    <div class="config-detail">
     <div  class="result-config">
       <el-input
        type="textarea"
          id="textarea"
        v-model="inputValue"
        show-word-limit
        :placeholder="ruleTip.content"
        :rows="20"
      >
      </el-input>
     </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    iframeData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    ruleTreelist: {
      type: Array,
      default: () => {
        return [];
      }
    },
    ruleTip: {
      type: Object,
      default: () => {
        return {
          title: "点击左侧到此处进行添加",
          content: "清填写sql"
        };
      }
    }
  },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label"
      },
      inputValue: ""
    };
  },
  created () {
    this.inputValue = this.iframeData.text;
  },
  methods: {
    async insertVariable(value) {
      const myField = document.querySelector('#textarea');
      if(myField.selectionStart || myField.selectionStart === 0) {
        let startPos = myField.selectionStart;
        let endPos = myField.selectionEnd;
        this.inputValue = myField.value.substring(0, startPos) + value
                    + myField.value.substring(endPos, myField.value.length);
        await this.$nextTick();
        myField.focus();
        myField.setSelectionRange(endPos + value.length, endPos + value.length);
      } else {
        this.inputValue = value;
      }
    },
    handleNodeClick(data) {
      if (data.drag) {
        this.insertVariable('%'+data.markKey+'%');
      }
    },
    allowDrag(draggingNode) {
      return draggingNode.data.drag ? draggingNode.data.drag : false;
    },
    getTasksqlText(){
      return this.inputValue;
    },
  }
};
</script>

<style lang="scss" scoped>

.rule-tip-box {
  height: 430px;
  font-size: 24px;
  .tip-title {
    text-align: center;
    font-size: 24px;
    padding-top: 150px;
  }
  .tip-content {
    text-align: center;
    font-size: 12px;
    line-height: 20px;
  }
}
.result-config {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
}
.left{
  width: 300px;
  border-right: 1px solid #dcdfe6;
}
.content {
  border: 1px solid #dcdfe6;
  margin: 10px;
  display: flex;
  border-radius: 3px 0px 0px 0px;
  .config-detail {
    flex: 1;
    border-radius: 0px 0px 3px 0px;
  }
}
</style>
